<template>
  <div class="content">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" >
      <el-form-item label="姓名" prop="rName">
        <el-input v-model="form.rName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="rSex">
        <el-radio-group v-model="form.rSex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄" prop="rAge">
        <el-input v-model.number="form.rAge" type="number"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop=" rCertificate">
        <el-input v-model="form.rCertificate"></el-input>
      </el-form-item>
      <el-form-item label="籍贯" prop="rNative">
        <el-input v-model="form.rNative"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="rRace">
        <el-input v-model="form.rRace"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="rTel">
        <el-input v-model="form.rTel"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="rAddress">
        <el-input v-model="form.rAddress"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-upload class="mysite1" action="http://localhost:9090/api/upload" :on-success='message' :show-file-list="false" >
    <el-button type="primary" @click="setPath">上传</el-button>
  </el-upload>
</template>

<script>
import { ref } from 'vue'
import request from "@/util/request.js";
import router from "@/router";
import html2canvas from 'html2canvas'
import {ElMessage} from "element-plus";

export default {
  name: 'Enroll',
  setup() {
    const formRef = ref(null)
    const form = ref({
      uId:'',
      rName: '',
      rSex: '',
      rAge: null,
      rCertificate: '',
      rNative: '',
      rRace: '',
      rTel: '',
      rAddress: ''
    })
    const rules = ref({
      rName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      rSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
      rAge: [
        { required: true, message: '请输入年龄', trigger: 'blur' },
        { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
      ],
      rCertificate: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
      rNative: [{ required: true, message: '请输入籍贯', trigger: 'blur' }],
      rRace: [{ required: true, message: '请输入民族', trigger: 'blur' }],
      rTel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
      rAddress: [{ required: true, message: '请输入地址', trigger: 'blur' }]
    })
    const submitForm = () => {
      formRef.value.validate(valid => {
        if (valid) {
          html2canvas(document.querySelector('.content')).then(canvas=>{
            const imgUrl = canvas.toDataURL('image/jpeg')
            // const image = document.createElement('img')
            // image.src = imgUrl
            // 将生成的图片放到 类名为 content 的元素中
            // document.querySelector('.content').appendChild(image)
            const a = document.createElement('a')
            a.href = imgUrl
            // a.download 后面的内容为自定义图片的名称
            a.download = 'study_download'
            a.click()
          })
          let data=JSON.parse(localStorage.getItem("data"))
          form.value.uId=data.userId
          request.post("/api/RegistrationForm/insert",form.value).then(res=>{
            alert('提交成功!')   //validate 是校验函数  写提交接口
          })
        } else {
          alert('请正确填写表单!')
          return false
        }
      })
    }
    const resetForm = () => {
      formRef.value.resetFields()
    }
    const upload = () => {
      //todo 进行上传

    }
    const setPath=()=>{
      let data=JSON.parse(localStorage.getItem("data"))
      request.post("/api/student/getByuserId?userId="+data.userId).then(res=>{//通过用户id查找的学生id
        if(res.data!=null){
          request.post("/api/getsId?id="+res.data.sId).then(res=>{
          })
        }
      })
    }
    const message=()=>{
      ElMessage.success("上传成功")
      router.push('test1')
    }


    return {
      formRef,
      form,
      rules,
      submitForm,
      resetForm,
      upload,
      setPath,
      message
    }
  }
}
</script>

<style scoped>
.mysite1{
  margin-top: -143px;
  margin-left: 1280px;
  z-index: 99;
}
</style>